<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/table.css"/>
</head>
<body>

<div id="d1">
    <div id="d2">
        <input id="name" class="btn-default" type="text" placeholder="bucketName"/>
        <button id="btn" class="btn-default">获取列表</button>

    <table class="my-table">
        <thead>
        <tr>
            <th>文件名</th>
            <th>文件路径</th>
            <th>文件大小</th>
            <th>文件类型</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script>
    //监听回车键
    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            $("#btn").click();
        }
    });
    $('#btn').click(function () {
            queryPage();
        }
    );

    //表格填充函数
    function queryPage() {
        var name = $("#name").val();
        //页码的有效性判断
        $.post("http://localhost:8089/file/list", {bucketName: name}, function (result) {
            console.log(result);
            //填充数据到tbody
            $("#tbody").empty();//清除之前的内容
            $(result).each(function (index, fileVo) {
                $("#tbody").append(
                    " <tr>" +
                    "<td>" + fileVo.fileName + "</td>" +
                    "<td>" + fileVo.filePath + "</td>" +
                    "<td>" + fileVo.fileSize + "</td>" +
                    "<td>" + fileVo.fileType + "</td>" +
                    "</tr>"
                );
            })
        }, "json");
    }
</script>
</body>
</html>